<script setup lang="ts">
  import { WELCOME_TEXT, SUB_TEXT, AGENTS } from '../utils/constant'
  import SvgIcon from '@/components/SvgIcon/index.vue'
  import { ref } from 'vue'
  const emit = defineEmits(['clickAgent'])
  const curAgent = ref(AGENTS[0].icon)
  const handleClickAgent = (icon: string) => {
    curAgent.value = icon
    emit('clickAgent', icon)
  }
  // 体验次数
  const experienceCounts = ref([231, 131, 111])
</script>

<template>
  <div class="flex flex-col items-center justify-center mb-6">
    <img src="@/assets/images/logo.png" alt="default" />
    <div class="text-[#1B1C1D] text-[24px] font-bold mt-2 h-[38px] leading-[38px]">
      {{ WELCOME_TEXT }}
    </div>
    <div class="text-[#666D7A] text-[14px] mt-2 h-5 leading-5">
      {{ SUB_TEXT }}
    </div>
    <div class="flex items-center justify-center mt-4 gap-6">
      <div
        v-for="(item, index) in AGENTS"
        :key="item.name"
        class="relative pingfang px-4 py-3 flex w-[284px] h-[184px] gap-2 cursor-pointer agent-item"
        @click="handleClickAgent(item.icon)"
      >
        <SvgIcon class="text-[24px]" :name="item.icon" />
        <div class="flex-1">
          <div class="text-[#1B1C1D] text-[16px] font-bold leading-[22px]">
            {{ item.name }}
          </div>
          <div class="text-[#666D7A] text-[14px] mt-2 leading-[22px]">
            {{ item.desc }}
          </div>
          <div class="absolute bottom-3 left-12">
            <div class="text-[#666D7A] text-[14px] h-[22px] leading-[22px] flex items-center">
              <SvgIcon class="text-[16px] mr-1" name="fire" />
              <span>{{ experienceCounts[index] }}人体验</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
  .agent-item {
    border-radius: 8px;

    &.agent-item-active {
      border: 1px solid;
      border-image: linear-gradient(
          270deg,
          rgba(152, 164, 246, 1),
          rgba(226, 240, 246, 1),
          rgba(226, 240, 246, 1),
          rgba(122, 192, 246, 1)
        )
        1 1;
      // clip-path: inset(0 round 8px);
      /* 或者使用 mask 方案（备选） */
      mask:
        radial-gradient(circle at 8px 8px, transparent 7px, black 8px),
        radial-gradient(circle at calc(100% - 8px) 8px, transparent 7px, black 8px),
        radial-gradient(circle at 8px calc(100% - 8px), transparent 7px, black 8px),
        radial-gradient(circle at calc(100% - 8px) calc(100% - 8px), transparent 7px, black 8px),
        linear-gradient(black, black);
      mask-size:
        16px 16px,
        16px 16px,
        16px 16px,
        16px 16px,
        100% 100%;
      mask-position:
        0 0,
        100% 0,
        0 100%,
        100% 100%,
        center;
      mask-repeat: no-repeat;
    }

    &:first-child {
      background: url('@/assets/images/home/agent-1.png') no-repeat center center;
      background-size: 100% 100%;
    }

    &:nth-child(2) {
      background: url('@/assets/images/home/agent-2.png') no-repeat center center;
      background-size: 100% 100%;
    }

    &:nth-child(3) {
      background: url('@/assets/images/home/agent-3.png') no-repeat center center;
      background-size: 100% 100%;
    }
  }
</style>
